<template>
    <fieldset>
        <legend>Products</legend>
        <h1>商品:</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称:{{ item.title }}
                </b>
                <b>
                    价格：{{ item.price }}
                </b>
                <b>
                    库存：{{ item.inventory }}
                </b>
                <button :disabled="item.inventory===0" @click="addCart(item)">+加入购物车</button>

            </li>
        </ul>
    </fieldset>
</template>
<!--
    需求：
     1.请求服务器，在product组件里面渲染数据
        - 封装请求的方法
        - 请求放到vuex的action里面
        - vuex需要模块化,并且添加mutation
     2.点击产品后面的按钮，需要将产品添加到购物车
     3.相同的数据添加到购物车之后，需要让购物车的数量加1 产品的库存-1
     4.总价计算
 -->

<script>
import { mapActions, mapState } from 'vuex';
export default{
    methods:{
        addCart(current){
            // console.log(current)
            this.ADD_CART(current)
        },  
        ...mapActions('product',['FETCH_PRODUCT']),
        ...mapActions('cart',['ADD_CART']),
    },
    computed:{
        ...mapState('product',['productData'])
    },
    mounted(){
        this.FETCH_PRODUCT()
    },

}


</script>
